$dropdown-trigger-icon: 'arrow_drop_down' !default;
$dropdown-trigger-icon-width: var(--rz-icon-size) !default;
$dropdown-trigger-icon-height: $dropdown-trigger-icon-width !default;
$dropdown-trigger-icon-margin: 0 0.5rem 0 0 !default;

$dropdown-horizontal-padding: 0.5rem !default;
$dropdown-items-margin: 0 (-$dropdown-horizontal-padding) !default;
$dropdown-items-padding: 0 !default;

$dropdown-item-padding: $dropdown-horizontal-padding !default;
$dropdown-item-font-size: var(--rz-input-font-size) !default;
$dropdown-item-hover-background-color: var(--rz-secondary-light) !default;
$dropdown-item-hover-color: var(--rz-text-contrast-color) !default;
$dropdown-item-selected-background-color: var(--rz-secondary-dark) !default;
$dropdown-item-selected-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01) !default;
$dropdown-item-selected-color: var(--rz-text-contrast-color) !default;
$dropdown-item-selected-hover-background-color: var(--rz-secondary) !default;
$dropdown-item-selected-hover-color: var(--rz-text-contrast-color) !default;
$dropdown-item-transition: none !default;
$dropdown-item-disabled-opacity: 0.2 !default;
$dropdown-item-border-radius: 0 !default;

$dropdown-label-padding: 0 $dropdown-trigger-icon-width 0 0 !default;
$dropdown-filter-border: var(--rz-border-base-100) !default;
$dropdown-filter-padding: 0.5rem 0 !default;

$dropdown-open-background-color: var(--rz-base-background-color) !default;
$dropdown-open-border: var(--rz-input-border) !default;

$dropdown-panel-padding: 0 $dropdown-horizontal-padding !default;
$dropdown-panel-border: var(--rz-input-border) !default;
$dropdown-panel-shadow: none !default;

$dropdown-chips-padding: var(--rz-input-padding) !default;

$multiselect-checkbox-margin: 0 0.5rem 0 0 !default;

// DropDown CSS variables

:root {
  --rz-dropdown-trigger-icon-width: #{$dropdown-trigger-icon-width};
  --rz-dropdown-trigger-icon-height: #{$dropdown-trigger-icon-height};
  --rz-dropdown-trigger-icon-margin: #{$dropdown-trigger-icon-margin};

  --rz-dropdown-horizontal-padding: #{$dropdown-horizontal-padding};
  --rz-dropdown-panel-padding: #{$dropdown-panel-padding};
  --rz-dropdown-items-margin: #{$dropdown-items-margin};
  --rz-dropdown-items-padding: #{$dropdown-items-padding};

  --rz-dropdown-item-padding: #{$dropdown-item-padding};
  --rz-dropdown-item-font-size: #{$dropdown-item-font-size};
  --rz-dropdown-item-hover-background-color: #{$dropdown-item-hover-background-color};
  --rz-dropdown-item-selected-background-color: #{$dropdown-item-selected-background-color};
  --rz-dropdown-item-selected-shadow: #{$dropdown-item-selected-shadow};
  --rz-dropdown-item-hover-color: #{$dropdown-item-hover-color};
  --rz-dropdown-item-selected-color: #{$dropdown-item-selected-color};
  --rz-dropdown-item-selected-hover-background-color: #{$dropdown-item-selected-hover-background-color};
  --rz-dropdown-item-selected-hover-color: #{$dropdown-item-selected-hover-color};
  --rz-dropdown-item-transition: #{$dropdown-item-transition};
  --rz-dropdown-item-disabled-opacity: #{$dropdown-item-disabled-opacity};

  --rz-dropdown-label-padding: #{$dropdown-label-padding};
  --rz-dropdown-filter-border: #{$dropdown-filter-border};
  --rz-dropdown-filter-padding: #{$dropdown-filter-padding};

  --rz-dropdown-open-background-color: #{$dropdown-open-background-color};
  --rz-dropdown-open-border: #{$dropdown-open-border};
  --rz-dropdown-panel-border: #{$dropdown-panel-border};
  --rz-dropdown-panel-shadow: #{$dropdown-panel-shadow};

  --rz-dropdown-chips-padding: #{$dropdown-chips-padding};

  --rz-multiselect-checkbox-margin: #{$multiselect-checkbox-margin};
}

%dropdown {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-align: start;

  @extend %input;

  &.rz-state-disabled {
    @extend %input-disabled;
  }

  .rz-placeholder {
    color: var(--rz-input-placeholder-color);
  }
}

.rz-dropdown {
  @extend %dropdown;

  &.rz-dropdown-open {
    background-color: var(--rz-dropdown-open-background-color);
    border: var(--rz-dropdown-open-border);
  }
}

.rz-multiselect {
  @extend %dropdown;

  &.rz-state-focus {
    background-color: var(--rz-dropdown-open-background-color);
    border: var(--rz-dropdown-open-border);
  }
}

%dropdown-trigger {
  position: absolute;
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  bottom: 0;

  .rzi {
    width: var(--rz-dropdown-trigger-icon-width);
    height: var(--rz-dropdown-trigger-icon-height);
    font-size: var(--rz-dropdown-trigger-icon-height);
    margin: var(--rz-dropdown-trigger-icon-margin);
  }

  .rzi-chevron-down {
    &:before {
      content: $dropdown-trigger-icon;
    }
  }
}

.rz-dropdown-trigger {
  @extend %dropdown-trigger;
}

.rz-dropdown-clear-icon {
  position: absolute;
  right: calc(var(--rz-dropdown-trigger-icon-width) + 0.5rem);
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: var(--rz-dropdown-trigger-icon-height);
  opacity: 0.4;

  &:before {
    content: 'close';
  }

  &:hover {
    opacity: 1;
  }
}

.rz-multiselect-trigger {
  @extend %dropdown-trigger;
}

%dropdown-panel {
  position: absolute;
  background-color: var(--rz-dropdown-open-background-color);
  border-radius: var(--rz-input-border-radius);
  border: var(--rz-dropdown-panel-border);
  box-shadow: var(--rz-dropdown-panel-shadow);
}

.rz-dropdown-panel {
  @extend %dropdown-panel;
  box-sizing: content-box;
  padding: var(--rz-dropdown-panel-padding);
}

.rz-multiselect-panel {
  @extend %dropdown-panel;
  box-sizing: content-box;
  padding: var(--rz-dropdown-panel-padding);

  .rz-chkbox {
    margin: var(--rz-multiselect-checkbox-margin);
  }
}

%rz-dropdown-items, .rz-dropdown-items {
  list-style: none;
  padding: var(--rz-dropdown-items-padding);
  margin: 0;

  li {
    /* The 'No results found' item has no CSS class */
    @extend %rz-dropdown-item;
  }
}

.rz-multiselect-items {
  @extend %rz-dropdown-items;
}

.rz-dropdown-items-wrapper,
.rz-multiselect-items-wrapper {
  overflow: auto;
  margin: var(--rz-dropdown-items-margin);
  border-radius: var(--rz-input-border-radius);
}

.rz-multiselect-items-wrapper {
  overflow: auto;
}

.rz-dropdown-filter-container {
  padding: var(--rz-dropdown-filter-padding);
  @extend %filter-container;
  border-bottom: var(--rz-dropdown-filter-border);
}

%rz-dropdown-filter, .rz-dropdown-filter {
  background-color: transparent;
  color: var(--rz-text-color);
}

.rz-multiselect-header {
  display: flex;
  align-items: center;
  padding: var(--rz-dropdown-item-padding);
  margin: var(--rz-dropdown-items-margin);
}

@mixin dropdown-item($radius: $dropdown-item-border-radius) {
  cursor: default;
  font-size: var(--rz-dropdown-item-font-size);

  &.rz-state-highlight {
    background-color: var(--rz-dropdown-item-selected-background-color);
    color: var(--rz-dropdown-item-selected-color);
    box-shadow: var(--rz-dropdown-item-selected-shadow);

    @if $radius {
      border-radius: $radius;
    }

    &:hover {
      background-color: var(--rz-dropdown-item-selected-hover-background-color);
      color: var(--rz-dropdown-item-selected-hover-color);
    }
  }

  &.rz-state-disabled {
      opacity: var(--rz-dropdown-item-disabled-opacity);
      cursor: initial;
  }
}

@mixin dropdown-item-hover($radius: $dropdown-item-border-radius) {
  &:hover {
    background-color: var(--rz-dropdown-item-hover-background-color);
    color: var(--rz-dropdown-item-hover-color);
    @if $radius {
      border-radius: $radius;
    }
  }
}

%rz-dropdown-item, .rz-dropdown-item {
  padding: var(--rz-dropdown-item-padding);
  transition: var(--rz-dropdown-item-transition);

    @include dropdown-item();
    @include dropdown-item-hover();
}


.rz-multiselect-close {
  display: none;
}

.rz-multiselect-filter-container {
  @extend %filter-container;
  flex: auto;
  border-bottom: var(--rz-dropdown-filter-border);

  .rz-inputtext {
    @extend %rz-dropdown-filter;
    padding: 0;
  }
}

.rz-multiselect-item {
    @extend %rz-dropdown-item;
    display: flex;
    align-items: center;
}

.rz-multiselect-label-container,
.rz-dropdown-label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: var(--rz-dropdown-label-padding);
  margin: 0;
}

.rz-dropdown-chips {
    height: inherit;
    padding: var(--rz-dropdown-chips-padding);

    .rz-dropdown-chips-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-right: 3rem;
    }

    @include chip();
}

.rz-clear {
  .rz-multiselect-label-container,
  .rz-dropdown-label {
    padding-right: calc(2 * var(--rz-dropdown-trigger-icon-width));
  }
}
